<template>
  <div class="modal" v-if="visible">
    <div class="modal-content">
      <button class="close-btn" @click="close">Close</button>
      <div class="modal-header">
        <span class="rating">0.0 ★ 0</span>
        <span class="studied">Studied by 0 people</span>
        <button class="open-btn">Open</button>
      </div>
      <h2>I love chat</h2>
      <div class="modal-body">
        <h3>Study Guide: The Silk Road</h3>
        <p><strong>Overview:</strong> The Silk Road was a vast network of trade routes established during the Han Dynasty of China, connecting the East to the West.</p>
        <h4>Key Points:</h4>
        <ol>
          <li><strong>Establishment:</strong>
            <ul>
              <li>Founded during the Han Dynasty (206 BCE – 220 CE).</li>
              <li>Facilitated commerce between various civilizations.</li>
            </ul>
          </li>
          <li><strong>Main Commodity:</strong> Silk was the most valuable commodity traded along the routes.</li>
          <li><strong>Other Goods Traded:</strong>
            <ul>
              <li>Spices</li>
              <li>Tea</li>
              <li>Porcelain</li>
              <li>Precious metals</li>
            </ul>
          </li>
          <li><strong>Cultural Exchange:</strong>
            <ul>
              <li>The Silk Road was not only a trade route but also a conduit for cultural, religious, and technological exchanges between different societies.</li>
              <li>Ideas such as Buddhism and art styles spread along the route.</li>
            </ul>
          </li>
          <li><strong>Impact:</strong>
            <ul>
              <li>Enhanced economic prosperity in participating regions.</li>
              <li>Fostered relationships between diverse cultures and nations.</li>
            </ul>
          </li>
        </ol>
        <p><strong>Summary:</strong> The Silk Road played a crucial role in shaping the interconnected world by facilitating trade and cultural exchange, profoundly influencing the development of the civilizations it connected.</p>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  visible: Boolean
});

const emit = defineEmits(['close']);

const close = () => {
  emit('close');
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #2a2a2a;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 800px;
  color: white;
}

.close-btn {
  background-color: #444;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 10px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.rating, .studied {
  color: #aaa;
}

.open-btn {
  background-color: #00bfa5;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.modal-body {
  margin-top: 16px;
}

h2, h3, h4 {
  margin: 0 0 8px 0;
}

ol, ul {
  margin: 0 0 16px 20px;
}

strong {
  color: #fff;
}
</style> 